<%@ page import="constutil.Constants" %>
<%@ page import="chatroom.bean.LoginUser" %><%--
  Created by IntelliJ IDEA.
  User: gongb
  Date: 2022/4/19
  Time: 16:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      border: 1px solid red;
    }

    .con {
      display: flex;
      flex-direction: column;
      height: 90vh;
    }

    .con .header {
      flex: 1;
    }

    .con .center {
      flex: 5;
      display: flex;

    }

    .con .center .left {
      flex: 3;
      display: flex;
      flex-direction: column;
    }
    .con .center .left .up{
      flex: 2;
    }
    .con .center .left .down{
      flex: 1;
      position:relative;
    }
    .con .center .right {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .con .center .right .up{
      flex: 1;
    }
    .con .center .right .center{
      flex: 4;
      display: flex;
      flex-direction: column;
    }
    .con .center .right .down{
      flex: 5;
    }

    #tip_msg{
      color:green;
      position:absolute;
      top:10px;
      right:10px;
      display:none;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script src="<%=request.getContextPath()%>/js/DateUtil.js">
  </script>
</head>

<body>
<div class="con">
  <div class="header">
    用户#：<%=request.getSession().getAttribute(Constants.SESSION_USER_ID)%>
    <a href="<%=request.getContextPath()%>/logoOutServlet">退出</a>
  </div>
  <div class="center">
    <div class="left">
<%--      聊天消息start--%>
      <div class="up" id="message_content">
      </div>
<%--  聊天消息end--%>
      <div class="down">
        <textarea name="" id="msgContext" style="width: 80%;height: 100%;"></textarea>
        <input type="button" value="发送" id="sendBtn">
        <div id="tip_msg">
          默认
        </div>
      </div>
    </div>
    <div class="right">
      <div class="up">
        好友列表
      </div>
      <div class="center">
        <p>张三</p>
        <p>李四</p>
      </div>
      <div class="down">
        系统广播
        <div id="loginUserList">

        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function(){
    let myToName = '';
    //发送消息
    $("#sendBtn").click(function(){
      // alert($("#msgContext").val())
      // ;
      //发送数据给服务器
      let msgContext = $("#msgContext").val();
      let msg ={
        toName:myToName,
        message:msgContext
      }
      // debugger
      $.ajax({
        url: "<%=request.getContextPath()%>/receiveMsgServlet",
        dataType:'json',//响应的预期参数格式
        data:msg,//发出数据内容
        contentType:"application/json",
        success: function(data){
          // alert('执行完毕')
          // data = JSON.parse(data);
          console.log(data.status)
          console.log(data.msg)

            if(data.status == 200){
              if(data.msg){
                //提示已发送成功
                  $("#tip_msg").html(data.msg);
                  // $("#tip_msg").css({ "display": "block" });
                  $("#tip_msg").fadeIn("slow");
                  setTimeout(function(){
                    $("#tip_msg").fadeOut("slow");
                  },2000)


                  $("#message_content").append('<%=request.getSession().getAttribute(Constants.SESSION_USER_ID)%> ['+dateFormat("YYYY-mm-dd HH:MM:SS", new Date())+']:'+msgContext).append('<br/>');
                  $("#msgContext").val('');
              }
            }

        }
      });
    });

    //轮询读取消息
    // setInterval(function(){
      $.ajax({
        url: "<%=request.getContextPath()%>/roundMsgServlet",
        dataType:'json',//响应的预期参数格式
        contentType:"application/json",
        success: function(data){
          // alert('执行完毕')
          // data = JSON.parse(data);
          debugger
          console.log(data.status)
          console.log(data.msg)

          if(data.status == 200){
            if(data.msg == 'success'){

              //提示已发送成功
              //TODO 活的批量消息集合 遍历添加
              $("#message_content").html('');
              if(data.other){
                $.each(data.other, function(i, item){
                  // alert( "Item #" + i + ": " + item );
                  $("#message_content").append(item).append("<br/>");
                });
              }
            }
          }
        }
      });
    // },2000)
    //获得广播
    setInterval(function(){
        $.ajax({
          url: "<%=request.getContextPath()%>/roundLoginUserListServlet",
          dataType:'json',//响应的预期参数格式
          contentType:"application/json",
          success: function(data){
            // alert('执行完毕')
            // data = JSON.parse(data);
            // debugger
            console.log(data.status)
            console.log(data.msg)

            if(data.status == 200){
              if(data.msg == 'success'){

                //提示已发送成功
                //TODO 活的批量消息集合 遍历添加
                // debugger
                $("#loginUserList").html('');
                if(data.other){
                  $.each(data.other, function(i, item){
                    // alert( "Item #" + i + ": " + item );
                    <%
                      Object currentUser = request.getSession().getAttribute(Constants.SESSION_USER_ID);
                      if(null != currentUser){
                        String username = currentUser.toString();
                      %>
                    // debugger
                      if(item.username != '<%=username%>'){
                        $("#loginUserList").append("<a href='javascript:void(0)' class='toNameItem'>"+item.username+"</a>").append(' ['+item.loginTime+']').append("<br/>");
                      }
                    <%
                      }
                    %>

                  });
                  $(".toNameItem").click(function(){
                      let toName = $(this).html();
                    myToName = toName;
                      alert(toName)
                  });
                }
              }
            }
          }
        });
    },3000)

  });
</script>
</body>

</html>